<template>
    <div>
        <!--<div class="banner" v-if="bannerList[1]"-->
        <!--:style="{'background-image': 'url('+bannerList[1].bannerImgUrl+')'}"></div>-->
        <div class="banner">
            <carousel :height="'5rem'" arrow="never" :interval="5000" ref="bannerCarousel"
                      class="carousel">
                <el-carousel-item v-for="(item,index) in bannerList" :key="index" v-if="item.bannerImgUrl">
                    <div class="img" :style="{'background-image': 'url('+item.bannerImgUrl+')'}"></div>
                </el-carousel-item>
            </carousel>
        </div>
        <div class="box layout">
            <div class="hot">
                <p class="title">热门产品</p>
                <carousel :height="carousel.height" :arrow="carousel.arrow" :interval="5000" ref="hotCarousel"
                          class="carousel">
                    <el-carousel-item v-for="(item,index) in hostResList" :key="index">
                        <ul class="host clearfix">
                            <li v-for="(items,index) in item" :key="index"
                                @click="$router.push('/spm/detail/'+items.id)">
                                <div class="li-box">
                                    <el-image
                                        class="img"
                                        :src="items.fileInfo.path"
                                        fit="scale-down"
                                        v-if="items.fileInfo">
                                    </el-image>
                                </div>
                                <p class="li-title ellipsis">{{items.name}}</p>
                                <p class="li-content two-single-line">
                                    {{items.description}}
                                </p>
                            </li>
                        </ul>
                    </el-carousel-item>
                </carousel>
            </div>
        </div>
        <div class="produce">
            <div class="feature">
                <p class="title">产品特色</p>
                <ul>
                    <li v-for="items in resFeatureList" :key="items.id">
                        <div class="img">
                            <el-image
                                class="img"
                                :src="items.fileInfo.path"
                                fit="scale-down"
                                v-if="items.fileInfo">
                            </el-image>
                        </div>
                        <p class="feature-li ellipsis">{{items.featureName}}</p>
                        <p class="feature-title two-single-line">
                            {{items.description}}
                        </p>

                    </li>
                </ul>
            </div>
        </div>
        <div class="cooperate layout">
            <div class="units">
                <p class="title">合作单位</p>
                <ul class="clearfix">
                    <li class="units-li ellipsis white-block" v-for="(items,index) in coopList" :key="index"
                        @click="open(items)">
                        <!--<img :src="items.logoImgUrl" alt="" class="logo">-->
                        <div class="logo">
                            <el-image
                                class="img"
                                :src="items.fileInfo.path"
                                fit="scale-down"
                                v-if="items.fileInfo">
                            </el-image>
                        </div>
                        {{items.cooperationUnit}}
                    </li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script>
    import carousel from '../../components/carousel'

    export default {
        data() {
            return {
                carousel: {
                    height: '4rem',
                    arrow: 'always'
                },
                bannerList: [],
                hostResList: [],
                resFeatureList: [],
                coopList: []
            }
        },
        mounted() {
            this.indexMap()
        },
        methods: {
            indexMap() {
                this.$http.get('/gsRes/indexMap').then(result => {
                    if (result.success) {

                        this.bannerList = result.data.bannerList
                        let chunk = 4, list = []
                        for (var i = 0, j = result.data.hostResList.length; i < j; i += chunk) {
                            list.push(result.data.hostResList.slice(i, i + chunk))
                        }
                        if (list.length < 2) this.carousel.arrow = 'never'
                        this.hostResList = list
                        this.resFeatureList = result.data.resFeatureList
                        this.coopList = result.data.coopList
                        this.$method.updateView()
                    }
                })
            },
            open(item) {
                window.open(item.pageLink, '_blank')
            }
        },
        components: {
            carousel
        }
    }
</script>

<style scoped lang="less">
    .title {
        padding-top: 0.79rem;
        text-align: center;
        font-size: 0.26rem;
        position: relative;
    }

    .title::after {
        content: "";
        position: absolute;
        bottom: -.1rem;
        left: 50%;
        margin-left: -.27rem;
        width: .54rem;
        height: .02rem;
        background-color: #00A0E9;
    }

    .banner {
        .img {
            height: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-color: #030406;
        }

    }

    .box {
        .carousel {
            margin-top: 0.3rem;
            background-color: #fff;
            .host {
                width: 100%;
                height: 100%;
                li {
                    float: left;
                    width: 25%;
                    height: 100%;
                    text-align: center;
                    padding: .8rem  .3rem .3rem;
                    cursor: pointer;
                    .li-box {
                        width: 1.6rem;
                        height: 1.6rem;
                        margin: 0 auto;
                        margin-bottom: .3rem;
                        .img{
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .li-title {
                        font-size: .2rem;
                        margin-bottom: .1rem;
                    }

                    .li-content {
                        color: #999;
                        font-size: .14rem;
                    }
                }
            }
        }
    }

    .produce {
        height: 6.36rem;
        margin-top: 0.84rem;
        background-color: #fff;

        .feature {
            width: 12rem;
            margin: 0 auto;

            ul {
                width: 13rem;
                height: 3.2rem;
                margin-top: 0.6rem;

                li {
                    float: left;
                    width: 2.8rem;
                    margin-left: 0.27rem;
                    padding: .3rem;
                    border-radius: 0.1rem;
                    box-shadow: 0.01rem 0.01rem 0.1rem #eee;
                    text-align: center;
                    .img {
                        width: 1.4rem;
                        height: 1.4rem;
                        margin: auto;
                    }

                    .feature-li {
                        text-align: center;
                        font-size: .2rem;
                        margin: .2rem 0 .1rem;
                    }

                    .feature-title {
                        text-align: center;
                        font-size: 0.14rem;
                        color: #999;
                    }
                }

                li:first-child {
                    margin-left: 0;
                }
            }

        }
    }

    .cooperate {
        padding-bottom: .5rem;
        .units {
            ul {
                li {
                    float: left;
                    width: 30%;
                    height: 1rem;
                    line-height: 1rem;
                    margin-top: .4rem;
                    background-color: #fff;
                    font-size: .18rem;
                    margin-right: 5%;
                    cursor: pointer;
                    padding: 0 .3rem;
                    .logo {
                        float: left;
                        width: .8rem;
                        height: 100%;
                        padding: .1rem;
                        display: flex;
                        align-items: center;
                        .img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                }
            }
        }
    }
</style>
